<template>
  <el-dialog
    title="导出仿真数据至Excel"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <download-excel
      class="export-excel-wrapper"
      :data="this.exportDataArr"
      :fields="json_fields"
      name="仿真数据.xls"
    >
      <span class="guideText">请选择需要导出的数据:</span>
      <div class="exportCheckBox">
        <el-checkbox v-model="tChecked">t</el-checkbox>
        <el-checkbox v-model="roughtTheta1Checked">θ1</el-checkbox>
        <el-checkbox v-model="roughtTheta2Checked">θ2</el-checkbox>
        <el-checkbox v-model="roughOmega1Checked">ω1</el-checkbox>
        <el-checkbox v-model="roughOmega2Checked">ω2</el-checkbox>
        <el-checkbox v-model="x1Checked">x1</el-checkbox>
        <el-checkbox v-model="y1Checked">y1</el-checkbox>
        <el-checkbox v-model="x2Checked">x2</el-checkbox>
        <el-checkbox v-model="y2Checked">y2</el-checkbox>
      </div>
      <el-button
        class="exportButton"
        @click="generateExportData"
        type="primary"
        size="small"
      >
        导出EXCEL
      </el-button>
    </download-excel>
  </el-dialog>
</template>

<script>
export default {
  name: "data-export-dialog",
  data() {
    return {
      dialogVisible: false,
      exportDataArr: [],
      tChecked: true,
      roughtTheta1Checked: true,
      roughtTheta2Checked: true,
      roughOmega1Checked: false,
      roughOmega2Checked: false,
      x1Checked: false,
      y1Checked: false,
      x2Checked: false,
      y2Checked: false,
      json_fields: {},
    };
  },
  methods: {
    chooseExportItems() {
      if (this.tChecked == true) {
        this.json_fields["t"] = "t";
      }
      if (this.roughtTheta1Checked == true) {
        this.json_fields["θ1(°)"] = "roughtTheta1";
      }
      if (this.roughtTheta2Checked == true) {
        this.json_fields["θ2(°)"] = "roughtTheta2";
      }
      if (this.roughOmega1Checked == true) {
        this.json_fields["ω1(°/s)"] = "roughOmega1";
      }
      if (this.roughOmega2Checked == true) {
        this.json_fields["ω2(°/s)"] = "roughOmega2";
      }
      if (this.x1Checked == true) {
        this.json_fields["x1(m)"] = "x1";
      }
      if (this.y1Checked == true) {
        this.json_fields["y1(m)"] = "y1";
      }
      if (this.x2Checked == true) {
        this.json_fields["x2(m)"] = "x2";
      }
      if (this.y2Checked == true) {
        this.json_fields["y2(m)"] = "y2";
      }
    },

    generateExportData() {
      var roughtTheta1 = this.$store.state.roughTheta1;
      var roughtTheta2 = this.$store.state.roughTheta2;
      var roughOmega1 = this.$store.state.roughOmega1;
      var roughOmega2 = this.$store.state.roughOmega2;
      var innerBallPosition = this.$store.state.innerBallPosition;
      var outerBallPosition = this.$store.state.outerBallPosition;

      if (roughtTheta1.length == 0) {
        this.$message({
          message: "导出为空，请先进行仿真",
          showClose: true,
          center: true,
          type: "warning",
        });

        this.dialogVisible = false;
      } else {
        this.chooseExportItems();

        var exportDataArr = [];

        for (var i = 0; i < roughtTheta1.length; i++) {
          var exportDataOjb = {
            t: roughtTheta1[i][0],
            roughtTheta1: roughtTheta1[i][1],
            roughtTheta2: roughtTheta2[i][1],
            roughOmega1: roughOmega1[i][1],
            roughOmega2: roughOmega2[i][1],
            x1: innerBallPosition[i][0],
            y1: innerBallPosition[i][1],
            x2: outerBallPosition[i][0],
            y2: outerBallPosition[i][1],
          };
          exportDataArr.push(exportDataOjb);
        }

        this.exportDataArr = exportDataArr;
        this.dialogVisible = false;
      }
    },
  },
};
</script>

<style>
.el-dialog {
  border-radius: 20px !important;
}

.el-dialog__title {
  display: block;
  text-align: center;
}

.el-dialog__close {
  width: 30px;
  height: 30px;
  font-size: 30px !important;
  border-radius: 10px;
}

.el-dialog__close:hover {
  background-color: #c5b5f0;
}

.guideText {
  font-size: 18px;
}

.exportCheckBox {
  margin-top: 20px;
}

.exportButton {
  margin-top: 30px !important;
  margin-left: 83% !important;
  border-radius: 20px !important;
}
</style>
